import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Button, WhiteSpace, WingBlank } from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css';
import configureStore from './store/mini-store'; // 简版
import { connect, Provider } from './store/redux/react-redux'; // 简版
import {
  increment,
  decrement,
  asyncChangeAge,
  addTwo,
  promiseChangeAge,
} from './store/action';
import useDarkMode from './hooks/useDarkMode';

const store = configureStore();

function App(props) {
  // console.log('props: ', props);

  const [enabled, setEnabled] = useDarkMode();

  useEffect(() => {
    document.title = 'redux demo';
  }, []);

  return (
    <>
      <WingBlank>
        <div>
          My name is {props.name}, My age is{' '}
          <h2 style={{ display: 'inline-block' }}>{props.age}</h2>
        </div>
      </WingBlank>
      <Button type="primary" onClick={() => props.increment()}>
        加
      </Button>
      <WhiteSpace size="sm" />
      <Button type="primary" onClick={() => props.decrement()}>
        减
      </Button>
      <WhiteSpace size="sm" />
      <Button type="primary" onClick={() => props.asyncChangeAge(2)}>
        async add
      </Button>
      <WhiteSpace size="sm" />
      <Button type="primary" onClick={() => props.addTwo()}>
        数组 add
      </Button>
      <WhiteSpace size="sm" />
      {/* <Button type="primary" onClick={() => props.promiseChangeAge(3)}>
        promise add
      </Button> */}
      <Button onClick={() => setEnabled(!enabled)}>
        {`切换${enabled ? '夜间' : '正常'}模式`}
      </Button>
    </>
  );
}

const mapStateToProps = (state) => {
  // console.log('state: ', state);
  const { counterReducer } = state;
  return counterReducer;
};

// mapDispatchToProps 参数可以是函数或对象，这里已对象为例
App = connect(mapStateToProps, {
  increment,
  decrement,
  asyncChangeAge,
  addTwo,
  promiseChangeAge,
})(App);

function RootEle() {
  return (
    <Provider store={store}>
      <App />
    </Provider>
  );
}

ReactDOM.render(<RootEle />, document.getElementById('root'));
